<template>
  <div>
    <!--顶部空白-->
    <div style="height: 3rem;"></div>

    <!--上拉加载-->
    <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了"
              @load="onLoad" :offset="20">
      <div>
        <van-card
            v-for="(item,index) in list"
            :key="index"
            :thumb="image+item.photoName"
            :title="info1+item.updateTime"
            :desc="info2+item.detectionTime"
            currency="检测结果："
            :price="item.detectResult"
            @click="showDetectionDetail(item.id);show = true"
        />
      </div>
    </van-list>

    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div>
          <van-cell title="姓名" :value="detectionRecordDetail.name" />
          <van-cell title="身份证号" :value="detectionRecordDetail.identity" />
          <van-cell title="手机号" :value="detectionRecordDetail.mobilePhone" />
          <van-cell title="省" :value="detectionRecordDetail.province" />
          <van-cell title="市" :value="detectionRecordDetail.city" />
          <van-cell title="区" :value="detectionRecordDetail.area" />
          <van-cell title="详细地址" :value="detectionRecordDetail.detailAddress" />
          <van-cell title="采样方式" :value="detectionRecordDetail.detectMethod" />
          <van-cell title="上传者" :value="detectionRecordDetail.uploadUserName" />
        </div>
      </div>
    </van-overlay>

  </div>
</template>

<style>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
</style>

<script>
import { ref } from 'vue';
export default {
  name: 'DetectionRecord',
  setup() {
    const show = ref(false);
    return { show };
  },
  data() {
    return {
      image: 'http://localhost:8085/detection/getAntigenPhoto/',
      info1: '更新时间:',
      info2: '检测时间:',

      identity: '',
      pageNumber: 1, //请求第几页
      pageSize: 10, //每页请求的数量

      list: [], //列表数据
      listTwo: [], //用于上拉加载时将数据合并
      total: 0, //总页数
      loading: false, //上拉加载
      finished: false, //加载与不加载的状态

      detectionRecordDetail: {}
    }
  },
  mounted() {
    this.getUserIdentity();
    this.getDetectionRecord();
  },
  methods: {

    getUserIdentity(){
      var userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.identity = userInfo.identity;
    },

    // 通过身份证号获取个人抗原检测记录
    getDetectionRecord(){
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/detection/getDetectionRecord",
            data: {
              pageNumber: this.pageNumber,
              pageSize: this.pageSize,
              identity: this.identity
            }
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.list = res.data.data;

          // 采样结果信息转换
          this.list.forEach(item => {
            this.detectResultFormat(item);
          })

          this.getTotal();
        }
      })
    },

    // 通过身份证号获取个人抗原检测记录总条数
    getTotal() {
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/detection/getDetectionRecordTotal",
            data: {
              identity: this.identity
            }
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.total = res.data.data;
          if (this.list.length >= this.total) {
            //将返回数据长度与总条数进行比较控制加载不加载的状态
            this.finished = true;
          }
        }
      })
    },

    // 上拉加载
    onLoad() {
      this.pageNumber++; //加载时页码递增

      //getDetectionRecord()
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/detection/getDetectionRecord",
            data: {
              pageNumber: this.pageNumber,
              pageSize: this.pageSize,
              identity: this.identity
            }
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.listTwo = res.data.data;
          this.listTwo.forEach(item => {
            //循环返回的数据并将数据添加到list中
            this.detectResultFormat(item);
            this.list.push(item);
          })
          this.getTotal();
          this.loading = false;// 加载状态结束 状态更新为false
        }
      })
    },

    // 抗原检测详细信息
    showDetectionDetail(id) {
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/detection/getDetectionRecordDetail",
            data: {
              id: id,
            }
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.detectionRecordDetail = res.data.data;
          this.detectMethodFormat(this.detectionRecordDetail);
        }
      })
    },

    // 采样方式信息转换
    detectMethodFormat(row) {
      switch (row.detectMethod) {
        case 1:
          row.detectMethod = '鼻腔';
          break;
        case 2:
          row.detectMethod = '鼻咽';
          break;
        case 3:
          row.detectMethod = '口腔';
          break;
      }
    },
    // 采样结果信息转换
    detectResultFormat(row) {
      switch (row.detectResult) {
        case 1:
          row.detectResult = '阳性';
          break;
          //return '阳性';
        case 2:
          row.detectResult = '阴性';
          break;
          //return '阴性';
        case 3:
          row.detectResult = '无效结果';
          break;
          //return '无效结果';
      }
    }
  }
}
</script>
